<template>
  <div class="y-history">
    <h3 class="h3">统计分析</h3>
    <a-form-model
      :model="form"
      :colon="false"
      :labelCol="{span:6}"
      :wrapper-col="{span:17}"
      style="margin:10px 0"
    >
      <a-row style="display: flex;align-items: center;width:100%" >
        <a-col :span="5" >
          <a-form-model-item label="设备型号" class="from-item__class" > 
            <a-input placeholder v-model="searchkey" />
          </a-form-model-item>
        </a-col>
        <a-col :span="5" >
          <a-form-model-item label="设备分类" class="from-item__class">
            <a-select default-value allow-clear v-model="sparePropertyId">
              <a-select-option
                :value="item.id"
                v-for="(item,index) in property"
                :key="index"
              >{{item.propertyName}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="3" style="display: flex;justify-content: space-between;margin-left:20px">
          <a-button type="primary" @click="onSubmit" >查询</a-button>
        </a-col>
        <a-col :span="4" :offset="9" >
          <a-button class="exportbtn">
            <a-icon type="cloud-download" />导出数据
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="tableclass">
      <a-table
        :data-source="data"
        :pagination="false"
        :columns="columns"
        :rowKey="record=> record.id"
      >
        <template slot="totalStock" slot-scope="text,record">
          <span style="color:#359842;">{{record.totalStock}}</span>
        </template>
        <template slot="notOutboundAmount" slot-scope="text,record">
          <span style="color:#32C5AC;">{{record.notOutboundAmount}}</span>
        </template>
        <template slot="outboundRunningAmount" slot-scope="text,record">
          <span style="color:#B46CB5;">{{record.outboundRunningAmount}}</span>
        </template>
        <span slot="action" slot-scope="text,record,index">
          <a class="solvebtn" @click="showModal(record,index)">申领详情</a>
        </span>
      </a-table>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination
            :show-total="total => `共 ${total} 条记录`"
            v-model="current"
            :total="total"
            :defaultPageSize="size"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
      </div>
    </div>
    <addmodal :modalVisible.sync="addModalVisible" :send="send" ref="mychild"></addmodal>
  </div>
</template>

<script>
import addmodal from "../stock/modal";

export default {
  name: "y-history",
  data() {
    return {
      form: {
        name: "",
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          width: "10%",
          align: "center",
          ellipsis: true,
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "备品分类",
          dataIndex: "sparePropertyName",
          align: "center",
        },
        {
          title: "备品型号",
          dataIndex: "spareVersion",
          align: "center",
        },
        {
          title: "备品总数",
          dataIndex: "totalStock",
          scopedSlots: { customRender: "totalStock" },
          align: "center",
          width: "8%",
        },
        {
          title: "未出库",
          dataIndex: "notOutboundAmount",
          scopedSlots: { customRender: "notOutboundAmount" },
          align: "center",
          width: "8%",
        },
        {
          title: "出库",
          dataIndex: "outboundAmount",
          scopedSlots: { customRender: "outboundAmount" },
          align: "center",
          width: "8%",
        },

        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "20%",
          align: "center",
        },
      ],
      data: [],
      property: [],
      current: 1,
      size: 10,
      total: 0,
      sparePropertyId: "", //属性
      searchkey: "", //查询关键字
      addModalVisible: false,
      send: {}, //模态框请求参数
      userId: "",
    };
  },
  components: {
    addmodal,
  },
  methods: {
    getId() {
      this.userId = this.$user.id;
    },
    //获取属性（水，空气，污染物）
    getAtrribute() {
      this.$api.GetlistSpareProperty().then((res) => {
        this.property = res.data.data;
        console.log(this.property);
      });
    },

    // 查询获取记录列表
    onSubmit() {
      console.log(this.$api);
      this.$api
        .PostsparePartsStatistical({
          currentPage: this.current,
          pageSize: this.size,
          searchKey: this.searchkey,
          sparePropertyId: this.sparePropertyId,
          userId:this.userId
        })
        .then((res) => {
          this.data = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    onSelect(record, selected, selectedRows, nativeEvent) {
      console.log(record, selected, selectedRows, nativeEvent);
    },
    onSelectAll(selected, selectedRows, changeRows) {
      console.log(selected, selectedRows, changeRows);
    },
    onChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);
    },
    // 表格方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.onSubmit();
    },
    //模态框
    showModal(data, index) {
      console.log(data, index);
      this.addModalVisible = !this.addModalVisible;
      this.send = data;
      this.$nextTick(() => {
        this.$refs.mychild.initializeRequest("B");
      });
    },
  },

  mounted() {
    this.getId();
    this.$nextTick(() => {
      this.getAtrribute();
      this.onSubmit();
    });
  },
};
</script>
<style scoped>
.green {
  color: #38ddc1;
}
.pink {
  color: #bf74bf;
}
.white {
  color: #b6b7b8;
}
.light-green {
  color: #327167;
}
a {
  color: #207064;
}
a:hover {
  color: #207064;
}
.y-history {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.y-history .from-item__class {
  display: flex;
}

.sousuobtn {
  font-size: 14px;
  background-color: #207064;
  border-color: #207064;
  font-weight: 600;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
}
.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  position: absolute;
  right: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.y-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}
::v-deep.y-history .ant-table table {
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
::v-deep.y-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep.y-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #2c6a60;
}
::v-deep.y-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}
::v-deep.y-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}
::v-deep.y-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}
::v-deep.y-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
::v-deep.y-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
::v-deep .ant-table-tbody > tr > td {
  border-bottom: 1px solid #207064;
}
::v-deep .ant-table-thead > tr > th {
  border-bottom: 1px solid #207064;
}
::v-deep .ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}
/* 分页 */
::v-deep.y-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>